import React, { Component } from "react";
import { connect } from "react-redux";
import { addPersonAction } from "../../redux/actions/person";
import { v4 as uuidv4 } from 'uuid';

class Person extends Component {
    
    addPerson = ()=> {
        let name = this.username.value
        let age = this.age.value
        this.props.addPerson({ id: uuidv4(), name, age })
        this.username.value = ""
        this.age.value = ""
    }

    render() {
        return (
            <div>
                <input ref={ c => this.username = c } type="text" />
                <input ref={ c => this.age = c } type="text" />
                <button onClick={ this.addPerson }>add</button>
                <div>
                    <ul>
                        {
                            this.props.persons.map( ( person ) =>{
                                return (
                                    <li key={person.id}>{person.name}----{ person.age }</li>
                                )
                            } )
                        }
                    </ul>
                </div>
            </div>
        );
    }
}

export default connect((state) => ({ persons: state.persons }), {
    addPerson: addPersonAction,
})(Person);
